<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name | upperCase}}</td>
                <!-- 使用代码块实现，有代码侵入 -->
                <td>{{user.gender===1? "男":"女"}}</td>
                <td>{{user.gender | genderFilter}}</td>
            </tr>
        </table>
    </div>

    <script src="../node_modules/vue/dist/vue.min.js">  </script>

    <script>

        Vue.filter("upperCase", function(value){
            return  value.charAt(0).toUpperCase() + value.slice(1);
        })

        let app = new Vue({
            el: "#app",
            data: {
                userList:[
                    {id: 1, name:"木丁西", gender: 1},
                    {id: 2, name:"小龙女", gender: 0},
                    {id: 3, name:"老顽童", gender: 1},
                    {id: 4, name:"mdx", gender: 1},
                    {id: 5, name:"jack", gender: 1}
                ]
            },
            filters:{
                genderFilter(gender){
                    return gender===1 ? "男~" : "女~";
                }
            }
        });
    </script>
</body>

</html>